<template>
	<view class="page">
		<view class="title">请填写发票信息</view>
		<view class="list-box">
			<radio-group @change="onChoose">
				<label class="item-box" v-for="(item,index) in listData" :key="index">
					<radio :value="index" color="#E81526"
					 style="transform: scale(.9);"/><text class="label-text">{{item.name}}</text>
				</label>
			</radio-group>
			<view class="item-box" v-if="currentIndex > 0">
				<input class="input-text" type="text" v-model="rise" placeholder="发票抬头">
			</view>
			<view class="item-box" v-if="currentIndex > 1">
				<input class="input-text" type="text" v-model="number" placeholder="纳税人识别号">
			</view>
		</view>
		<view class="submit-btn" @tap="onSubmit">确定</view>
	</view>
</template>

<script>
	import {getTaxListApi,postDeliveryChooseApi} from '@/api/user.js'
	import {mapState} from 'vuex'
	export default {
		computed: {
			...mapState(['user_id','token'])
		},
		data() {
			return {
				listData: [{
					name: '不开票',
					value: 0
				}],
				currentIndex: 0,
				rise: '',
				number: ''
			};
		},
		onLoad({rise = '',number = ''}) {
			this.rise = rise
			this.number = number
			this.getTaxList()
		},
		methods: {
			onChoose(e) {
				this.currentIndex = e.detail.value
			},
			async getTaxList() {
				const res = await getTaxListApi({
					user_id: this.user_id,
					token: this.token
				})
				let list = []
				for (let i in res.data) {
					list.push({
						name: res.data[i][0],
						value: res.data[i][1]
					})
				}
				this.listData = this.listData.concat(list)
			},
			async onSubmit() {
				if(this.rise === '' || this.rise.length === 0) {
					uni.showToast({
						title: '请填写发票抬头',
						icon: 'none'
					})
					return
				}
				uni.$emit('chooseTax',{
					rise: this.rise,
					number: this.number,
					...this.listData[this.currentIndex]
				})
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #f4f4f4;
}
.title {
	height: 120rpx;
	line-height: 120rpx;
	padding-left: 30rpx;
}
.list-box {
	background-color: #ffffff;
	.item-box {
		border-bottom: 1rpx solid #f5f5f5;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		display: block;
		.label-text {
			font-size: 28rpx;
			color: #333333;
		}
		.input-text {
			font-size: 28rpx;
			color: #333333;
		}
	}
}
.submit-btn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 750rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	font-size: 28rpx;
	color: #ffffff;
	background-color: #E81526;
}
</style>
